<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础使用</text>
         <view class="uv-demo-block__content">
            <uv-code-input
               v-model="value1"
               :maxlength="4"
               @change="change"
               @finish="finish"
            ></uv-code-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">横线模式</text>
         <view class="uv-demo-block__content">
            <uv-code-input v-model="value2" mode="line" :maxlength="4" :bold="true"></uv-code-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">设置长度</text>
         <view class="uv-demo-block__content">
            <uv-code-input v-model="value3" :maxlength="6"></uv-code-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">设置间距</text>
         <view class="uv-demo-block__content">
            <uv-code-input v-model="value4" mode="box" :space="0" :maxlength="4"></uv-code-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">细边框</text>
         <view class="uv-demo-block__content">
            <uv-code-input
               v-model="value5"
               mode="box"
               :space="0"
               :maxlength="4"
               hairline
            ></uv-code-input>
         </view>
         <view class="uv-demo-block__content" style="margin-top: 10px">
            <uv-code-input
               v-model="value6"
               mode="line"
               :space="10"
               :maxlength="4"
               hairline
            ></uv-code-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">调整颜色</text>
         <view class="uv-demo-block__content">
            <uv-code-input
               v-model="value7"
               mode="box"
               :space="0"
               :maxlength="4"
               hairline
               color="#f56c6c"
               borderColor="#f56c6c"
            ></uv-code-input>
            <view class="uv-demo-block__content" style="margin-top: 10px">
               <uv-code-input
                  v-model="value10"
                  mode="line"
                  size="30"
                  :maxlength="4"
                  hairline
                  color="#3c9cff"
                  borderColor="#3c9cff"
               ></uv-code-input>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">点模式</text>
         <view class="uv-demo-block__content">
            <uv-code-input
               v-model="value8"
               mode="box"
               dot
               :space="0"
               :maxlength="4"
               hairline
            ></uv-code-input>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">预置内容</text>
         <view class="uv-demo-block__content">
            <uv-code-input
               v-model="value9"
               mode="box"
               :space="0"
               :maxlength="4"
               hairline
               fontSize="17"
            ></uv-code-input>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');
const value5 = ref('');
const value6 = ref('');
const value7 = ref('');
const value8 = ref('');
const value9 = ref('123');
const value10 = ref('34');

const change = (value: string) => {
   console.log('change', value);
};

const finish = (value: string) => {
   console.log('finish', value);
};
</script>

<style lang="scss" scoped></style>
